import React, { Component } from 'react';
import {
	StyleSheet, Text, Animated, View, TouchableOpacity
} from "react-native";
import moment from 'moment';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import MethodUtil from '../../../utils/MethodUtil';
import Utils from '../../../utils/utils';
import { title } from '../create/_components/form/offerMap';
import { showMap } from '../create/_components/form/offerMap.js';
import { ApplyListCard } from '../_components/ApplyListCard';

const scale = GLOBAL.SCALE;
const arrowIcon = require('../../../imgs/order/down.png')
export class ApplyOfferCard extends Component {
	constructor(props) {
		super(props);
		this.state = {
			allData: {},
			itemData: {},
			listData: [],
			imgObj: new Animated.Value(0)
		}
	}

	componentWillReceiveProps(props) {
		const { listData, itemData, allData } = props;
		this.setState({
			listData,
			itemData,
			allData
		})
	}

	componentWillMount() {
		const { listData, itemData, allData } = this.props;
		this.setState({
			listData,
			itemData,
			allData
		})
	}

	dateFormat(date) {
		return date ? `${moment(date).format('YYYY-MM-DD')} ${date.substring(11, 16)}` : '-'
	}

	// 商品展开和隐藏
	toggleProduct = (index, currentHeight, openHeight, num) => {
		let { listData, imgObj } = this.state;
		listData[index].showItem = !listData[index].showItem;
		Animated.spring(currentHeight, {
			duration: 300,
			toValue: listData[index].showItem ? openHeight * scale : num * 2 * scale,
		}).start();
		Animated.timing(imgObj, { toValue: listData[index].showItem ? 1 : 0, duration: 300 }).start()
		this.props.resetListData(listData)
	}

	render() {
		let { imgObj, itemData } = this.state;
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '180deg'] //输出值
		})
		let { renderBottomComponent, salesType, bizModel } = this.props;
		let { item } = itemData
		let topId, topName
		if (bizModel === 'M') {
			topName = '场次号：'
			topId = item.periodNum

		}
		else {
			topName = '资源：'
			topId = item.bidPackageId
		}
		let { bidPackageName, lastUpdateTime, upTime, packageResourceList, winRule } = item;

		return (
			<View style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale, marginTop: 12 * scale, marginBottom: 12 * scale }}>
				<View style={styles.itemTimeData}>
					<Text style={styles.itemLightText}>{topName} {topId || '-'}</Text>
					<Text style={styles.itemLightText}>最后更新时间：{this.dateFormat(lastUpdateTime)}</Text>
				</View>
				<View style={styles.itemWrap}>
					<View style={styles.itemName}>
						<Text style={styles.itemBoldTitle}>{bidPackageName || ''}</Text>
					</View>
					<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingLeft: 12 * scale }}>
						<Text style={{ fontSize: 12 * scale, paddingBottom: 12 * scale }}>上架：{this.dateFormat(upTime) || '-'} </Text>
					</View>
					<View style={styles.itemBorder}></View>
					<Animated.View style={[styles.itemBody, packageResourceList && packageResourceList.length > 2 ? { height: item.boxHeight, overflow: 'hidden' } : '']}>
						{packageResourceList && packageResourceList.map((item, index) => {
							return (
								<View style={[styles.offerItem]} key={index}>
									<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 * scale }}>
										<Text style={styles.offerTitle}>{item.goodsName}</Text>
										<Text style={styles.offerTitleRed}>{item.applyTypeName && item.statusName ? (item.applyTypeName + item.statusName) : null}</Text>
									</View>
									<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
										<Text style={{ fontSize: 12 * scale, color: '#000' }}>申请人：{item.createByName}{item.teamName ? '（' + item.teamName + '）' : null}</Text>
										<Text style={{ fontSize: 12 * scale, color: '#000' }}>{item.updateTime}</Text>
									</View>
									<ApplyListCard item={item} winRule={winRule} bizModel={bizModel} salesType={salesType} key={index} />
								</View>
							)
						})
						}
					</Animated.View>
					{
						packageResourceList && packageResourceList.length > 2 ? (
							<TouchableOpacity activeOpacity={1} style={styles.toggleImg} onPress={() => this.toggleProduct(itemData.index, item.boxHeight, item.openHeight, item.num)}>
								<Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={arrowIcon} ></Animated.Image>
							</TouchableOpacity>
						) : null
					}
					<View>
						{/* {renderBottomComponent ? <View style={styles.itemBorder}></View> : null} */}
						{renderBottomComponent ? renderBottomComponent : null}
					</View>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	itemLightText: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '500',
	},
	itemTimeData: {
		marginBottom: 7 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	itemWrap: {
		backgroundColor: '#fff',
		width: '100%',
		borderRadius: 8 * scale,
		marginTop: 6 * scale,
		paddingTop: 14 * scale,
	},
	itemName: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		marginBottom: 15 * scale,
		marginTop: 5 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
	},
	itemBoldTitle: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '900',
		width: 250 * scale
	},
	itemTitleStatus: {
		fontSize: 10 * scale,
		color: style.color.themeColor,
		paddingRight: 7 * scale,
		paddingLeft: 7 * scale,
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 11 * scale
	},
	itemBorder: {
		height: 1 * scale,
		backgroundColor: '#E3E7F0',
		marginBottom: 15 * scale,
	},
	productItem: {
		flexDirection: 'column',
		justifyContent: 'center',
		paddingTop: 10 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	productItemName: {
		fontSize: 13 * scale,
		fontWeight: 'bold',
		marginBottom: 12 * scale
	},
	productItemInfoText: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
	},
	productItemInfoTip: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
		color: style.color.orange,
		backgroundColor: '#fbefe8',
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		paddingLeft: 6 * scale,
		paddingRight: 6 * scale,
		marginLeft: 8 * scale,
		borderRadius: 6 * scale
	},
	productItemInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 12 * scale
	},
	productItemTips: {
		fontSize: 11 * scale,
		lineHeight: 16 * scale,
		opacity: .8,
		marginBottom: 12 * scale
	},
	toggleImg: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
		// marginTop: 10 * scale,
		marginBottom: 10 * scale
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale
	},
	consent: {
		paddingRight: 20 * scale,
		paddingLeft: 20 * scale,
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		fontSize: 12 * scale,
		opacity: 1,
		color: '#ffffff',
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 15 * scale,
		backgroundColor: style.color.themeColor,
		overflow: 'hidden'
	},
	itemBody: {
		position: 'relative',
		overflow: 'hidden',
		backgroundColor: '#fff'
	},
	offerItem: {
		backgroundColor: '#fff',
		paddingBottom: 10 * scale,
		paddingHorizontal: 20 * scale,
		borderRadius: 6 * scale,
		marginBottom: 14 * scale
	},
	offerTitle: {
		fontSize: 13,
		color: '#000000',
		fontWeight: "600"
	},
	offerTitleRed: {
		fontSize: 12,
		color: '#CA0202',
		fontWeight: '600',
		marginLeft: 5 * scale
	},
	offerPackContent: {
		marginTop: 7 * scale,
		paddingVertical: 10 * scale,
	},
})